<template>
  <div class="container" :style="{ backgroundColor: getBgColor }">
    <div class="left-nav">
      <Nav :bgColor="getBgColor" />
    </div>
    <div class="right-content">
      <div class="header">
        <!-- 监听自定义事件 -->
        <Header @switchChanged="handleSwitchChange" />
      </div>
      <div class="content" :style="{ backgroundColor: getBgColor }">
        <RouterView :style="{ backgroundColor: getBgColor }" />
      </div>
    </div>
  </div>
</template>

<style>
.container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* background-color: aqua; */
}

.left-nav {
  width: 200px;
  /* background-color: aquamarine; */
  float: left;
  height: 100%;
  border-right: 2px solid aquamarine;
}

.right-content {
  margin-left: 202px;
}

.header {
  height: 70px;
  width: 100%;
  background-color: blue;
}

.content {
  min-height: calc(100% - 70px);
}
</style>

<script setup>
import { ref, computed, provide } from 'vue';
import Nav from '@/views/Nav/index.vue';
import Header from '@/views/Header/index.vue';

// 引入主题仓库
import { useThemeStore } from '@/stores/themeStore';
// 获取主题存储实例
const themeStore = useThemeStore();

// 计算属性，根据开关状态返回对应的背景颜色
const getBgColor = computed(() => {
  return themeStore.isRedTheme ? '#ff4949' : '#13ce66';
});

// 通过 provide 提供背景颜色，方便子组件使用
provide('bgColor', getBgColor);



/*
  ---
     以下废弃
  ---
*/

// // 存储开关状态
// const isSwitchOn = ref(true);

// // 处理开关状态变化的方法
// const handleSwitchChange = (newValue) => {
//   isSwitchOn.value = newValue;
// };

// // 计算属性，根据开关状态返回对应的背景颜色
// const getBgColor = computed(() => {
//   return isSwitchOn.value ? '#ff4949' : '#13ce66';
// });

// // 通过 provide 提供背景颜色，方便子组件使用
// provide('bgColor', getBgColor);
</script>